<template>
  <!--  -->
  <div class="priview">
    <div class="priview-content" id="vippreviewcontent">
      <div id="vippreviewchild">
        <h2>会员申请表</h2>

        <div class="flex priview-content-block">
          <h4>会员类型</h4>
          <div class="flex-row">
            <!-- <div class="flexone flex">
              <div class="flex-row priview-label">
                <span>{{data.memberType === 'PERSONAL' ? '个人会员' : '团体会员'}}</span>
              </div>
            </div> -->
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <span>{{data.gisMember === 'YES' ? '中地协会员' : '非中地协会员'}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="flex  priview-content-block">
          <h4>会员代表人信息</h4>
          <div class="flex-row">
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>姓名</label>
                <span>{{data.username}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>出生日期</label>
                <span>{{data.birthday}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>固定电话</label>
                <span>{{data.fixedTelephone}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>职称</label>
                <span>{{data.professionalTitle}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>政治面貌</label>
                <span>{{pb}}</span>
              </div>
            </div>
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>性别</label>
                <span>{{data.sex === '1' ? '男' : '女'}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>手机</label>
                <span>{{data.phone}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>Email</label>
                <span>{{data.email}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>职务</label>
                <span>{{data.position}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="flex  priview-content-block">
          <h4>会员单位基本信息</h4>
          <div class="flex-row">
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>单位名称</label>
                <span>{{data.companyName}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>单位地址</label>
                <span>{{data.companyAddress}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>单位性质</label>
                <span>{{cn}}</span>
              </div>
            </div>
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>组织机构代码</label>
                <span>{{data.organizationCode}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>邮编</label>
                <span>{{data.companyPost}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>测绘资质</label>
                <span>{{gd}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="flex  priview-content-block" v-if="data.memberType === 'TEAM'">
          <h4>会员单位联系人</h4>
          <div class="flex-row">
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>姓名</label>
                <span>{{data.contactsName}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>手机</label>
                <span>{{data.contactsPhone }}</span>
              </div>
              <div class="flex-row priview-label">
                <label>职称</label>
                <span>{{data.contactsPosition}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>微信号</label>
                <span>{{data.contactsWechat}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>QQ</label>
                <span>{{data.contactsQq}}</span>
              </div>
            </div>
            <div class="flexone flex">
              <div class="flex-row priview-label">
                <label>传真</label>
                <span>{{data.fax}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>固定电话</label>
                <span>{{data.contactsFixedTelephone}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>职务</label>
                <span>{{data.contactsProfessionalTitle}}</span>
              </div>
              <div class="flex-row priview-label">
                <label>Email</label>
                <span>{{data.contactsEmail}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="flex priview-content-block" v-if="data.memberType === 'TEAM'">
          <h4>理事会职务申请信息</h4>
          <div class="flex-row">
            <div class="flexone flex">
              <div class="flex-row priview-label-one">
                <label>申请理事会职务</label>
                <span>{{position}}</span>
              </div>
              <div class="flex-row priview-label-one" v-if="position !=='无'">
                <label>职务申请人工作经历</label>
                <span>{{data.workExperience}}</span>
              </div>
              <div class="flex-row priview-label-one" v-if="position !=='无'">
                <label>职务申请人学历简介</label>
                <span>{{data.educationalBackground}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="flex priview-content-block" v-if="data.memberType === 'TEAM'">
          <h4>会员单位其他信息</h4>
          <div class="flex-row">
            <div class="flexone flex">
              <div class="flex-row priview-label-one">
                <label>会员单位情况简介</label>
                <span>{{data.companyIntroduce}}</span>
              </div>
              <!-- <div class="flex-row priview-label-one">
                <label>单位意见</label>
                <span>{{data.companyOpinion}}</span>
              </div> -->
              <div class="flex-row priview-label-one">
                <label>单位负责人</label>
                <span>{{data.companyPrincipalName}}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="flex priview-content-block" v-if="data.memberType === 'PERSONAL'">
          <h4>个人其他信息</h4>
          <div class="flex-row">
            <div class="flexone flex">
              <div class="flex-row priview-label-one">
                <label>个人履历</label>
                <span>{{data.personalResume}}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="flex priview-content-block">
          <div class="flex-row">
            <div class="flexone flex">
              <div class="flex-row priview-label-one">
                <label style="color: #94C05A;">附件信息</label>
                <img src="../../assets/logo.png" alt="">
              </div>
            </div>
          </div>
        </div> -->
        <!-- 一整块的结束 -->
      </div>
    </div>
    <div class="tc" style="margin-top: 20px;">
      <el-button type="success" round class="width-200" @click="html2pdf()">导出为pdf文件</el-button>
    </div>
  </div>
</template>

<script>
// import $ from 'jquery'
  export default {
    title: '申请预览',
    name: 'vip-perview',
    data () {
      return {
        data: {}
      }
    },

    beforeRouteEnter (to, from, next) {
     // 在渲染该组件的对应路由被 confirm 前调用
     // 不！能！获取组件实例 `this`
     // 因为当守卫执行前，组件实例还没被创建
     next(vm => {
       vm.data = to.query
     })
    },
    methods: {
      html2pdf () {
        this.$getPdf('vippreviewcontent', '会员申请表')
        // $("#vippreviewcontent").wordExport();
      }
    },
    computed: {
      position () {
        if (this.data.councilPosition === 'N') return '无'
        if (this.data.councilPosition === 'LS') return '理事单位'
        if (this.data.councilPosition === 'CWLS') return '常务理事单位'
        if (this.data.councilPosition === 'FHZDW') return '副会长单位'
        if (this.data.councilPosition === 'CWFHZDW') return '常务副会长单位'
        if (this.data.councilPosition === 'HZDW') return '会长单位'
      },
      pb () {
        if (this.data.politicalBackground === 'ZGDY') return '中共党员'
        if (this.data.politicalBackground === 'ZGYBDY') return '中共预备党员'
        if (this.data.politicalBackground === 'GQTY') return '共青团员'
        if (this.data.politicalBackground === 'MGDY') return '民革党员'
        if (this.data.politicalBackground === 'MMMY') return '民盟盟员'
        if (this.data.politicalBackground === 'MJHY') return '民建会员'
        if (this.data.politicalBackground === 'MJINHY') return '民进会员'
        if (this.data.politicalBackground === 'MGDDY') return '农工党党员'
        if (this.data.politicalBackground === 'ZGDDY') return '致工党党员'
        if (this.data.politicalBackground === 'TMMY') return '台盟盟员'
        if (this.data.politicalBackground === 'WDPRS') return '无党派人士'
        if (this.data.politicalBackground === 'PTJM') return '普通居民'
      },
      cn () {
        if (this.data.companyNature === 'GYQY') return '国有企业'
        if (this.data.companyNature === 'WZQY') return '外资企业'
        if (this.data.companyNature === 'HZQY') return '合资企业'
        if (this.data.companyNature === 'SYQY') return '私营企业'
        if (this.data.companyNature === 'SYDW') return '事业单位'
        if (this.data.companyNature === 'GJXZJG') return '国家行政机关'
        if (this.data.companyNature === 'SHZZ') return '社会组织'
        if (this.data.companyNature === 'XX') return '学校'
        if (this.data.companyNature === 'QT') return '其它'
      },
      gd () {
        if (this.data.grade === 'N') return '非资质单位'
        if (this.data.grade === 'A') return '甲级'
        if (this.data.grade === 'B') return '乙级'
        if (this.data.grade === 'C') return '丙级'
        if (this.data.grade === 'D') return '丁级'
      }
    }
  }
</script>
<style>
  .priview {
    background: #F2F6EB;
    color: #666666;
    padding: 60px 0;
  }
  .priview-content {
    width: 800px;
    margin: auto;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 20px 70px;
    box-shadow: #cccccc 0px 0px 2px 2px;
  }
  .priview h2 {
    text-align: center;
  }
  .priview h4 {
    color: #94C05A;
    font-size: 18px;
  }
  .flex-row {
    display: flex;
  }
  .flex {
    display: flex;
    flex-direction: column;
  }
  .flexone {
    flex: 1;
  }
  .priview-label, .priview-label-one {
    margin-bottom: 20px;
  }
  .priview-label label {
    width: 100px;
  }
  .priview-label span {
    flex: 1;
  }
  .priview-label-one label {
    width: 150px;
  }
  .priview-label-one span {
    flex: 1;
    line-height: 1.7;
  }
  .priview-content-block {
    margin-bottom: 20px;
  }
  .priview-content-block + .priview-content-block {
    border-top: 1px solid #deeacc;
  }
</style>
